// 默认图片
import defaltImg from '@/assets/images/load.gif'
// useIntersectionObserver 监听组件
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    // 定义全局指令
    // directive 自定义指令
    app.directive('imgLazy', {
      // mounted 事件挂载完成后  生命周期
      mounted (el, dinding) {
        // el:img dom对象
        // binding.value  图片url地址
        // 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
        // img.src = url
        console.log(el, dinding)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // 监测到isIntersecting ture
            // binding.value  图片url地址
            el.src = dinding.value
            // onerror 媒体加载事件出错
            el.onerror = () => { el.src = defaltImg }
            // stop() 停止监测
            stop()
          }
        )
      }
    })
  }
}
